<template>
    <div class="box">
        <div class="container">
            <div class="row no-gutters">
                <a-row>
                    <a-col :span="16" :pull="0" class="col-1">
                        <div class="logo">
                            <h1><span class="logo-name">LiuLian Jia</span>的个人网站</h1>
                            <p>这是一个有趣的网站~~~///(^v^)\\\~~~专注于探索和实现新颖有趣的项目！</p>

                        </div>
                    </a-col>
                    <a-col :span="8" :push="0" class="col-2">
                        <div class="login-form">
                            <h1 class="title">欢迎回来</h1>
                            <a-form :model="formState" name="normal_login" @finish="onFinish"
                                @finishFailed="onFinishFailed">
                                <a-form-item name="username" :rules="[{ required: true, message: '请输入用户名或邮箱!' }]">
                                    <a-auto-complete v-model:value="formState.username" :bordered="false" :allow-clear="true"
                                        placeholder="用户名或邮箱" class="login-form-input" :options="options"
                                        @search="onSearch">
                                    </a-auto-complete>
                                </a-form-item>

                                <div v-if="yzmOrPassword">
                                    <a-form-item name="password"
                                        :rules="[{ required: passwordRequired, message: '请输入密码!' }]">
                                        <a-input-password v-model:value="formState.password" :bordered="false"
                                            allowClear placeholder="密码" class="login-form-input">
                                        </a-input-password>
                                    </a-form-item>
                                </div>
                                <div v-else>
                                    <a-form-item name="yzm" :rules="[{ required: yzmRequired, message: '请输入验证码!' }]">
                                        <a-input v-model:value="formState.yzm" :bordered="false" allowClear
                                            placeholder="验证码" class="login-form-input yzm-input">
                                        </a-input>
                                        <a-button type="primary" :loading="yzmSend" class="yzm-button" @click="send">
                                            {{ yzmText }}
                                        </a-button>
                                    </a-form-item>
                                </div>
                                <a-form-item>
                                    <a-form-item name="remember" no-style>
                                        <a-checkbox v-model:checked="formState.remember"
                                            class="login-remeber">记住我的登录消息</a-checkbox>
                                    </a-form-item>
                                </a-form-item>

                                <a-form-item style="text-align: center;">
                                    <a-button type="primary" html-type="submit" class="login-form-button"
                                        :loading="loginbtn">
                                        登录
                                    </a-button>
                                    <a-button type="primary" class="index-button" @click="toIndex()">
                                        首页
                                    </a-button>
                                    <div class="text-muted">
                                        <div v-if="yzmOrPassword">
                                            <small>没有账号/忘记密码？<a class="signup" @click="yzmBt">验证码</a></small>
                                        </div>
                                        <div v-else>
                                            <small>已有账号？<a class="signup" @click="yzmBt">密码</a></small>
                                        </div>
                                    </div>
                                </a-form-item>
                            </a-form>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { getYzm, login } from '../../api/login/login';
import { notification } from 'ant-design-vue';
import userInfoStore from '../../store/user.js'
import { useRouter } from "vue-router"

const user = userInfoStore()
const router = useRouter()

interface MockVal {
    value: string;
}
const mockVal = (str: string, repeat = 1): MockVal => {
    return {
        value: str.repeat(repeat),
    };
};
const options = ref<MockVal[]>([]);
const onSearch = (searchText: string) => {
    if (searchText.includes('@')) {
        options.value = [
            mockVal(searchText + 'qq.com'),
            mockVal(searchText + '163.com'),
            mockVal(searchText + '126.com'),
            mockVal(searchText + 'sina.com'),
            mockVal(searchText + 'aliyun.com')
        ];
    }
};

interface FormState {
    username: string;
    password: string;
    yzm: string;
    remember: boolean;
}
const formState = reactive<FormState>({
    username: '',
    password: '',
    yzm: '',
    remember: true,
});
const loginbtn = ref(false)
const type = ref('password')
const onFinish = (values: any) => {
    loginbtn.value = true
    login(formState.username, formState.password, formState.yzm, type.value).then((res: any) => {
        // loginLoading.value = false
        if (res.code === 200) {
            notification['success']({
                message: '欢迎回来！',
                duration: 3,
            });
            user.LoginIn(res.data)
            //刷新当前页面
            router.push('/')
        }
        else {
            notification['error']({
                message: res.message,
                duration: 3,
            });
        }
        loginbtn.value = false
    })
};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};

const passwordRequired = ref(true);
const yzmRequired = ref(false);
const yzmOrPassword = ref(true);
/**
 * 切换验证码
 */
function yzmBt() {
    yzmRequired.value = !yzmRequired.value;
    passwordRequired.value = !passwordRequired.value;
    yzmOrPassword.value = !yzmOrPassword.value;
    yzmOrPassword.value ? type.value = 'password' : type.value = 'yzm'
}

const yzmText = ref('验证码')
const yzmSend = ref(false)
// 定时器
let timer: any = null;
// 倒计时初始值
const countdown = ref(180);
/**
 * 发送验证码
 */
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
function send() {
    if (formState.username === '' || !emailRegex.test(formState.username)) {
        notification['error']({
            message: '邮箱格式错误！',
            description: '请输入正确的邮箱！',
            duration: 3,
        });
        return;
    }
    yzmSend.value = true;
    getYzm(formState.username).then((res => {
        if (res.code == 200) {
            notification['success']({
                message: '验证码发送成功！',
                description:
                    '验证码已发送至您的邮箱，3分钟内有效，请勿泄露或转发。',
                duration: 3,
            });
            //启动定时器
            loading();
            timer = setInterval(() => {
                //创建定时器
                if (countdown.value === 0) {
                    //关闭定时器
                    clearTimer();
                } else {
                    loading();
                }
            }, 1000);
        } else {
            notification['error']({
                message: '验证码发送失败！',
                duration: 3,
            });
            yzmSend.value = false;
        }
    }))
}
function loading() {
    //启动定时器
    yzmText.value = countdown.value + '秒';
    //定时器减1
    countdown.value--;
}
function clearTimer() {
    //清除定时器
    clearInterval(timer);
    timer = null;
    yzmText.value = '获取验证码';
    //重置倒计时
    countdown.value = 180;
    yzmSend.value = false;
}
/**
 * 去到首页
 */
function toIndex() {
    window.location.href = '/';
}
</script>
<style scoped lang="scss">
.box {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #4C6EF5, #f9f8f7);

    .container {
        height: 750px;
        min-width: 1080px;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;

        .no-gutters {
            width: 100%;

            .col-1,
            .col-2 {
                height: 600px;
            }

            .col-1 {
                background: rgba(241, 64, 75, .9);
                box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
                border-radius: 6px;
                width: 1080px;

                .logo {
                    margin: 40px 50px;
                    color: #fff;
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                    font-size: 0.8rem;
                    letter-spacing: 2px;

                    .logo-name {
                        font-weight: 700;
                        font-size: 2.4rem;
                    }
                }
            }

            .col-2 {
                display: flex;
                justify-content: center;
                align-items: center;

                .login-form {
                    width: 400px;
                    height: 500px;
                    border-radius: 6px;
                    margin-left: -170px;
                    padding: 10px 40px;
                    /* 半透明背景 */
                    background-color: rgba(255, 255, 255, 0.4);
                    /* 背景模糊 */
                    backdrop-filter: blur(10px);
                    /* 兼容老版本 Safari */
                    -webkit-backdrop-filter: blur(10px);


                    .title {
                        margin-top: 100px;
                        margin-bottom: 1.5em;
                        font-size: 1.5rem;
                        font-weight: 500;
                        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                    }

                    .login-form-input {
                        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
                        border-radius: 0;
                    }

                    .yzm-input {
                        width: 210px;
                        margin-right: 10px;
                    }

                    .yzm-button {
                        font-weight: 400;
                        background-color: rgba(241, 64, 75, .9);
                        color: #fff;
                        width: 100px;
                    }

                    .site-form-item-icon {
                        color: rgba(0, 0, 0, 0.25);
                    }

                    .login-remeber {
                        font-weight: 400;
                        font-size: 0.85em;
                    }

                    :deep(.ant-checkbox-inner) {
                        background: transparent;
                    }

                    .login-form-button {
                        margin: auto;
                        background-color: rgba(241, 64, 75, .9);
                        color: #fff;
                        border: none;
                        font-weight: 400;
                        font-size: 1.1em;
                        width: 40%;
                        margin-right: 10%;
                        border-radius: 4px;
                    }

                    .index-button {
                        border: 1px solid rgba(241, 64, 75, .9);
                        background-color: transparent;
                        color: rgba(241, 64, 75, .9);
                        width: 40%;
                        margin-left: 10%;
                        border-radius: 4px;
                    }

                    .text-muted {
                        text-align: left;
                        margin-top: 10px;

                        .signup {
                            color: rgba(241, 64, 75, .9);
                            font-weight: 600;
                        }
                    }
                }
            }
        }
    }
}
</style>